<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="Connexion-style.css">
        <link rel="stylesheet" href="style.css">
        <link rel="shortout icon" type="image/x-icon" href="Art_Yoshi_Ultimate.png"/>
        <title>Inscription</title>


        <!--link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet"-->
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/brands.min.css"-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/brands.min.css" integrity="sha512-8RxmFOVaKQe/xtg6lbscU9DU0IRhURWEuiI0tXevv+lXbAHfkpamD4VKFQRto9WgfOJDwOZ74c/s9Yesv3VvIQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/regular.min.css"-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/regular.min.css" integrity="sha512-TzeemgHmrSO404wTLeBd76DmPp5TjWY/f2SyZC6/3LsutDYMVYfOx2uh894kr0j9UM6x39LFHKTeLn99iz378A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/solid.min.css"-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/solid.min.css" integrity="sha512-pZlKGs7nEqF4zoG0egeK167l6yovsuL8ap30d07kA5AJUq+WysFlQ02DLXAmN3n0+H3JVz5ni8SJZnrOaYXWBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/svg-with-js.min.css"-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/svg-with-js.min.css" integrity="sha512-1dRVqjH1H79nqU3U7EhqE0E6G25FHVEqfoChIwiXBLk32sOWc6ZrgDzPax1VRuBr+NJknIO6B27MdlahVuZSRA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-font-face.min.css"-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-font-face.min.css" integrity="sha512-vU8GapgME7Cc/sHTwbn2Q1eMBgE/ZBU8JL/oRo+Cw/frBXtmeekNEYbNe2gezj/cPaSdkTdERyimVSb+2F6f0A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-shims.min.css"-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-shims.min.css" integrity="sha512-u6rY9/wehqytU8mKIhPvMDHtZmj6SbJ90Ctq8r5C+esABLe7qlQ2PY4l9gwK7xmr9fMp7d8yHvg2s3+nEsRjOg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v5-font-face.min.css"-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v5-font-face.min.css" integrity="sha512-DG+gORwHSOHlIRwrUl2peOlG9vcxDg8qnbI1WkCfttaERikRSgrRoDeDa1PK4uZD24IJwAeKb6TuQk+/15b66A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script-->
        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/brands.min.js" integrity="sha512-giAmE8KpCT6HP3DEwIvW9LYVnDs79iIaKEYFTjH62EWoglWgdAJa1ahiLUfoc3NFaAeWM6E3VdQyH1Ob2dmwQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script-->
        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/conflict-detection.min.js" integrity="sha512-7GbltvPUq7IRdFGoi+LQVL+KNVnVDfWcyxz9BfsGXwpOuqBysP/kPOYut4RfSipXadO8CL9oT4SzzN9aPMmeYg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/fontawesome.min.js" integrity="sha512-C8qHv0HOaf4yoA7ISuuCTrsPX8qjolYTZyoFRKNA9dFKnxgzIHnYTOJhXQIt6zwpIFzCrRzUBuVgtC4e5K1nhA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/regular.min.js" integrity="sha512-T4H/jsKWzCRypzaFpVpYyWyBUhjKfp5e/hSD234qFO/h45wKAXba+0wG/iFRq1RhybT7dXxjPYYBYCLAwPfE0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script-->
        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/solid.min.js" integrity="sha512-+fI924YJzeYFv7M0R29zJvRThPinSUOAmo5rpR9v6G4eWIbva/prHdZGSPN440vuf781/sOd/Fr+5ey0pqdW9w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script-->
        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/v4-shims.min.js" integrity="sha512-lcumC2XgVQA+cNJaYBRtZcTJ88EZ/Na2rG2yKtasO44flXlQWjvaqBqJch22AG9t/4pfD1EVD49oW8PBxtWBWg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script-->
        <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-ZksRGFnwop1QG0mG8r+vj9U4+LGoW25vO5h9Gl5x/wxa2RCQpTwKboVAeKN4W+VqS8X3QQYkmPfS0a16/s+19g==" crossorigin="anonymous" referrerpolicy="no-referrer" /-->
        
    </head>
    <body>
        <div class="logo-acceuil">
            <a href="index.html"><img src="logo.png" alt="logo"></a>
        </div>
        <div class="insc-form">
            <?php 
                if(isset($_GET['reg_err']))
                {
                    $err = htmlspecialchars($_GET['reg_err']);

                    switch($err)
                    {
                        case 'success':
                        ?>
                            <div class="success-stl">
                                <strong>Succès</strong> inscription réussie !
                            </div>  
                        <?php
                        break;

                        case 'password':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> mot de passe différent
                            </div>  
                        <?php
                        break;

                        case 'password':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> mot de passe différent
                            </div>  
                        <?php
                        break;

                        case 'weak_password':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> mot de passe doit avoir au moin un caractere special
                            </div>
                        <?php
                        break;

                        case 'email_length':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> email trop long
                            </div>
                        <?php 
                        break;

                        case 'pseudo_length':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> pseudo trop long
                            </div>
                        <?php 
                        case 'already':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> compte deja existant
                            </div>
                        <?php 
                        case 'sx_miss':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> veuillez mettre votre genre
                            </div>
                        <?php 
                        case 'surname_miss':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> veuillez mettre votre nom
                            </div>
                        <?php 
                        case 'name_miss':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> veuillez mettre votre prenom
                            </div>
                        <?php 
                        case 'dob_miss':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> veuillez mettre votre date de naissance
                            </div>
                        <?php 
                        case 'ntel_miss':
                        ?>
                            <div class="error-stl">
                                <strong>Erreur</strong> veuillez mettre votre n°telephone
                            </div>
                        <?php 

                    }
                }
            ?>
            
            <form action="inscription_traitement.php" method="post">
                <h1 class="text-center">Inscription</h1>       
                <!--div class="input-form">
                    <input type="text" name="pseudo" class="form-control1" placeholder="Pseudo" required="required" autocomplete="off">
                </div>
                <div class="input-form">
                    <input type="email" name="email" class="form-control1" placeholder="Email" required="required" autocomplete="off">
                </div>
                <div class="input-form">
                    <input type="password" name="password" class="form-control1" placeholder="Mot de passe" required="required" autocomplete="off">
                </div>
                <div class="input-form">
                    <input type="password" name="password_retype" class="form-control1" placeholder="Re-tapez le mot de passe" required="required" autocomplete="off">
                </div>
                <div class="input-form">
                    <button type="submit" class="btn-co">Inscription</button>
                </div--> 
                <!--div class="input-container">
                    <input type="text" id="username" class="text-input" autocomplete="off" placeholder="Enter your username" required />
                    <label class="label" for="username">Username</label>
                </div>
                <div class="input-container1">
                    <input type="password" id="password" class="pass-input" autocomplete="off" placeholder="Enter your username" required />
                    <label class="label" for="password">Password</label>
                    <p class="link-mdp"><a href="#">Mot de passe oublier ?</a></p>
                </div-->
                <hr>
                <div class="info_perso">
                    <div class="ttle1"><h3>Informations personnelles</h3></div>
                    <div class="inputs">
                        <!--div class="input-container">
                            <span class="custom-checkbox"> 
                                <label class="label" for="nom_user">Titre</label>
                                <input name="id_gender" type="radio">
                                <input name="id_gender" type="radio">
                            </span>
                        </div-->
                        <div class="input-container">
                            <input type="text" id="nom_user" name="nom_user" class="text-input" autocomplete="off" placeholder="Enter your surname" required />
                            <label class="label" for="nom_user">Nom</label>
                        </div>
                        <div class="input-container">
                            <input type="text" id="prenom_user" name="prenom_user" class="text-input" autocomplete="off" placeholder="Enter your name" required />
                            <label class="label" for="prenom_user">Prenom</label>
                        </div>
                        <div class="input-container">
                            <input type="date" id="datenaissance_user" name="datenaissance_user" class="text-input" required />
                        </div>
                        <div class="input-container container1">
                            <input type="radio" name="sexe_user" id="homme" value="Homme">
                            <label for="homme"><i class="fa-solid fa-person"></i></label>
                            <!--i class="fa-solid fa-person"></i-->
                            <br>
                            <input type="radio" name="sexe_user" id="femme" value="Femme">
                            <label for="femme"><i class="fa-solid fa-person-dress"></i></label>
                            <!--i class="fa-solid fa-person-dress"></i-->
                        </div>
                        <div class="input-container">
                            <input type="number" id="numtel_user" name="numtel_user" class="text-input" autocomplete="off" placeholder="Enter your phone number" required />
                            <label class="label" for="numtel_user">N° Telephone</label>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="info_authenti">
                    <div class="ttle"><h3>Informations d'authentification</h3></div>
                    <div class="inputs">
                        <div class="input-container">
                            <input type="text" id="pseudo_user" name="pseudo_user" class="text-input" autocomplete="off" placeholder="Enter your Pseudo" required />
                            <label class="label" for="pseudo_user">Pseudo</label>
                        </div>
                        <div class="input-container">
                            <input type="mail" id="email_user" name="email_user" class="text-input" autocomplete="off" placeholder="Enter your Email" required />
                            <label class="label" for="email_user">Email</label>
                        </div>
                        <div class="passwd-container">
                            <div class="p-input-container">
                            <input type="password" id="password_user" name="password_user" class="text-input" autocomplete="off" placeholder="Enter your Mot de passe" required />
                            <label class="label" for="password_user">Mot de passe</label>
                            <i class="fa-solid fa-eye" id="eye"></i>
                            </div>
                            <div class="pass-strength">
                                <div class="strength-percent"><span></span></div>
                                <span class="strength-label"></span>
                            </div>
                        </div>
                        <div class="passwd-container">
                            <div class="p-input-container">
                            <input type="password" id="password_retype" name="password_retype" class="text-input" autocomplete="off" placeholder="Re-tapez le Mot de passe" required />
                            <label class="label" for="password_retype">Confirmez le Mot de passe</label>
                            <!--i class="fa-solid fa-eye"></i-->
                            </div>
                            <!--div class="pass-strength">
                                <div class="strength-percent"><span></span></div>
                                <span class="strength-label"></span>
                            </div-->
                        </div>
                    </div>
                </div>
                <hr>
                <div class="coche">
                    <div class="newsletter"> 
                        <span class="custom-checkbox"> 
                            <input name="newsletter" type="checkbox" value="1"> 
                            <label>Recevoir notre newsletter<br></label> 
                        </span> 
                    </div>
                    <br>
                    <div class="regle"> 
                        <span class="custom-checkbox"> 
                            <input name="psgdpr" type="checkbox" value="1" required=""> 
                            <label>J'accepte les conditions d'utilisation et la politique de confidentialité.&nbsp;<a href="https://www.brico-phone.com/content/3-conditions-utilisation" style="color:#3ed2f0;text-decoration:underline;">Consulter les conditions d'utilisation</a><a href="https://www.brico-phone.com/3-conditions-utilisation"></a></label> 
                        </span> 
                    </div>
                </div>
                <hr>
                <div class="input-btn">
                    <!--input type="submit" class="button-input" placeholder="Submit" required /-->
                    <button placeholder="Submit" class="button-input">Continuer</button>
                </div>
            </form>
        </div>
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="footer-col">
                        <h4>Menu</h4>
                        <ul>
                            <li><a href="#">Rayon</a></li>
                            <li><a href="#">Catalogue</a></li>
                            <li><a href="#">Mes produits</a></li>
                            <li><a href="#">Panier</a></li>
                            <!--li><a href="#">Contacter-Nous</a></li-->
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h4>Nos services</h4>
                        <ul>
                            <li><a href="#">Drive</a></li>
                            <li><a href="#">Livraison à Domicile</a></li>
                            <li><a href="#">Livraison Express</a></li>
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h4>Article</h4>
                        <ul>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">Contacter-Nous</a></li>
                            <li><a href="#">Magasin</a></li>
                        </ul>
                    </div>
                </div>
            </div>
                <p>© 2022 Virginie Exotique
        
                    | Designed by <a rel="nofollow" href="#" target="_blank">Thiviyan Kulasegaram</a></p>
        </footer>
        <script src="input-js.js"></script>
        <script src="show-pass.js"></script>
        <script src="script.js"></script>
  <!--script src="input-js.js"></script-->
    </body>
</html>
